import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  FormOutlined,
  CopyOutlined,
  TagOutlined,
  SnippetsOutlined,
  BookOutlined,
  StarOutlined,
  MessageOutlined,
  MenuOutlined
} from '@ant-design/icons';
import React, { useState } from 'react';
import styles from './index.less';
import './index.less';
import { IRouteComponentProps, Link } from 'umi';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
const list = [
  {
    path: '/',
    title: '首页',
    commponent: DashboardOutlined,
  },
  {
    title: '产品管理',
    commponent: FormOutlined,
    child: [
      {
        path: '/prod-prodTag',
        title: '分组管理',
      },
      {
        path: '/prod-prodList',
        title: '产品管理',
      },
      {
        path: '/prod-category',
        title: '分类管理',
      },
      {
        path: '/prod-prodComm',
        title: '评论管理',
      },
      {
        path: '/article/tags',
        title: '规格管理',
      },
    ],
  },
  {
    path: '/page',
    title: '门店管理',
    commponent: SnippetsOutlined,
    child: [
      {
        path: '/shop-notice',
        title: '公告管理',
      },
      {
        path: '/shop-hotSearch',
        title: '热搜管理',
      },
      {
        path: '/admin-indexImg',
        title: '轮播图管理',
      },
      {
        path: '/shop-transport',
        title: '运费模板',
      },
      {
        path: '/article/tags',
        title: '自提点管理',
      },
    ],
  },
  {
    path: '/knowledge',
    title: '会员管理',
    commponent: BookOutlined,
    child: [
      {
        path: '/user-user',
        title: '会员管理',
      },
    ],
  },
  {
    path: '/poster',
    title: '订单管理',
    commponent: StarOutlined,
    child: [
      {
        path: '/order-order',
        title: '订单管理',
      },
    ],
  },
  {
    path: '/comment',
    title: '系统管理',
    commponent: MessageOutlined,
    child: [
      {
        path: '/sys-area',
        title: '地址管理',
        commponent: FormOutlined,
      },
      {
        path: '/sys-user',
        title: '管理员列表',
        commponent: CopyOutlined,
      },
      {
        path: '/sys-role',
        title: '角色管理',
        commponent: TagOutlined,
      },
      {
        path: '/article/tags',
        title: '菜单管理',
        commponent: TagOutlined,
      },
      {
        path: '/sys-schedule',
        title: '定时任务',
        commponent: TagOutlined,
      },
      {
        path: '/sys-config',
        title: '参数管理',
        commponent: TagOutlined,
      },
      {
        path: '/sys-log',
        title: '系统日志',
        commponent: TagOutlined,
      },
    ],
  },
];
export default function GlobalLayout({
  children,
  location,
  route,
  history,
  match,
}: IRouteComponentProps) {
  const [collapsed, setShow] = useState(false);

  function toggle() {
    setShow(!collapsed);
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} width="230">
        <h1 className="logo">{collapsed ? "亚米" : "亚米建站后台"}</h1>
        <Menu
          style={{ lineHeight: '40px'}}
          theme="dark"
          defaultSelectedKeys={['1']}
          mode="inline"
        >
          {list.map((item, index) => {
            return item.child ? (
              <SubMenu
                key={index}
                icon={<item.commponent />}
                title={item.title}
              >
                {item.child.map((v:any) => {
                  return (
                    <Menu.Item key={v.title} icon={v.commponent ? <v.commponent /> : <></>}>
                      <Link to={v.path}>{v.title}</Link>
                    </Menu.Item>
                  );
                })}
              </SubMenu>
            ) : (
              <Menu.Item key={index} icon={<item.commponent />}>
                <Link to={item.path}>{item.title}</Link>
              </Menu.Item>
            );
          })}
        </Menu>
      </Sider>
      <Layout className={styles.siteLayout}>
        <Header className={styles.siteLayoutBackground} style={{ paddingLeft:"20px"}}>
          {React.createElement(
            collapsed ? MenuOutlined : MenuOutlined,
            {
              className: 'trigger',
              onClick: toggle,
            },
          )}
        </Header>
        <Content
          className={styles.siteLayoutBackground}
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {children}
        </Content>
      </Layout>
    </Layout>
  );
}
